// 生命周期
import React, { Component, useState } from 'react'

class Son extends Component {
    // 1.声明周期函数
    // 组件渲染完毕执行一次，发送网络请求
    componentDidMount() {
        console.log("子组件挂载完成")
        this.timer = setInterval(() => {
            console.log("定时器运行中")

        }, 1000)
    }

    // 组件卸载的时候自动执行，副作用清理的工作，例如清理定时器，清除事件绑定
    componentWillUnmount() {
        console.log("子组件即将卸载")
        clearInterval(this.timer)
    }



    state = {
        count: 0
    }
    // 定义状态更新函数
    setCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <button onClick={this.setCount}>Counter{this.state.count}</button>
        )
    }
}


const App = () => {
    const [show, setShow] = useState(true)
    return (
        <div>
            {show && <Son />}
            <button onClick={() => setShow(!show)}>unmount</button>
        </div>
    )
}

export default App
